<template>
  <div class="project-dialog">
    <el-dialog
      :style="`--el-dialog-width:${configModel.width}%`"
      :model-value="drawerVisible"
      :destroy-on-close="true"
      :title="configModel.title"
      width="74%"
      top="10vh"
      draggable
      class="project-info-dialog"
      :close-on-click-modal="false"
      @closed="handleClose"
      @close="handleClose"
      @paste="handlePaste"
    >
      <el-scrollbar max-height="65vh">
        <el-form
          v-if="!configModel.show"
          ref="ruleFormRef"
          label-width="100px"
          label-suffix=" :"
          :rules="configOrigan.rules"
          :model="configOrigan.formData"
          v-bind="{ ...configOrigan.attribute }"
          label-position="top"
          class="mt20"
        >
          <div class="info-form">
            <el-form-item
              v-bind="{ ...item.formItemAttribute }"
              :prop="item.key"
              v-for="(item, index) in configModel.column"
              :key="item.key + '_' + index"
            >
              <Upload
                v-if="item.type === 'file'"
                v-bind="{ ...item.attributes }"
                v-model:file-list="configOrigan.formData[item.key]"
                :clipboard-data="clipboardDataList"
                @change="item.attributes?.change"
              />
              <UploadSlice
                v-if="item.type === 'fileSlice'"
                v-bind="{ ...item.attributes }"
                v-model:file="configOrigan.formData[item.key]"
                :clipboard-data="clipboardDataList"
                @success="item.attributes?.success"
                @change="item.attributes?.change"
              />
              <div class="group" v-else-if="item.type === 'group'">
                <div class="group-title" v-if="item.title">{{ item.title }}</div>
                <div
                  class="group-wrap"
                  :style="item.layout === 'grid' ? `display:grid;grid-template-columns: repeat(${item.len}, 1fr);` : ''"
                >
                  <div style="flex: 1" v-for="itm in item.list" :key="itm.key + 'group'">
                    <el-form-item v-bind="{ ...itm.formItemAttribute }" :prop="itm.key" v-if="!itm.isHidden">
                      <Upload
                        v-if="itm.type === 'file'"
                        v-bind="{ ...itm.attributes }"
                        v-model:file-list="configOrigan.formData[itm.key]"
                        :clipboard-data="clipboardDataList"
                        @change="itm.attributes?.change"
                      >
                        <slot :name="`${itm.key}`" :scope="configOrigan.formData"></slot>
                      </Upload>
                      <component
                        v-else
                        :is="'el-' + itm.type"
                        v-bind="{ ...itm.attributes }"
                        v-model="configOrigan.formData[itm.key]"
                        @change="
                          (val: any) => {
                            if (typeof itm.attributes?.changeFn === 'function') itm.attributes?.changeFn(val, configOrigan);
                          }
                        "
                      >
                        <template v-if="itm.type === 'select'">
                          <component
                            :is="`el-option`"
                            v-for="(col, idx) in itm.attributes.options"
                            :key="idx + '_'"
                            :label="col[itm?.fieldNames?.label] || col['name']"
                            :value="col[itm?.fieldNames?.value] || col['id']"
                          ></component>
                        </template>
                        <slot v-else></slot>
                      </component>
                    </el-form-item>
                  </div>
                </div>
              </div>
              <slot v-else-if="item.type === 'slot'" :name="`${item.key}`" :scope="configOrigan.formData"></slot>
              <component v-else :is="'el-' + item.type" v-bind="{ ...item.attributes }" v-model="configOrigan.formData[item.key]">
                <template v-if="item.type === 'select'">
                  <component
                    :is="`el-option`"
                    v-for="(col, idx) in item.attributes.options"
                    :key="idx + '_'"
                    :label="col[item?.fieldNames?.label] || col['name']"
                    :value="col[item?.fieldNames?.value] || col['id']"
                  ></component>
                </template>
              </component>
            </el-form-item>
          </div>
        </el-form>
        <div v-else v-for="(item, index) in configModel.column" :key="'group_' + index">
          <div class="group mt30 pl24 pr24 group-content">
            <div class="group-title mb20" v-if="item.title">{{ item.title }}</div>
            <div
              class="group-wrap"
              :style="item.layout === 'grid' ? `display:grid;grid-template-columns: repeat(${item.len}, 1fr);` : ''"
            >
              <div
                style="display: flex; flex: 1; flex-flow: column nowrap; height: 100%"
                v-for="itm in item.list"
                :key="itm.key + 'group'"
              >
                <div class="mb20 ft14 title" style="color: rgb(153 153 153 / 100%)">{{ itm.title }}</div>
                <div class="ft14 text" style="color: rgb(51 51 51 / 100%)">{{ itm.value }}</div>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
      <template #footer v-if="!configModel.show">
        <el-button @click="handleClose"> 取消 </el-button>
        <el-button v-if="!configOrigan?.attribute?.disabled" @click="handleSubmit"> 确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue"; // computed
import { ElMessage, ElDialog, ElScrollbar, ElButton, ElFormItem, ElForm } from "element-plus";
import Upload from "@/components/Upload/upload.vue";
import UploadSlice from "@/components/Upload/UploadSlice.vue";
// 初始化数据
const props = defineProps({
  drawerVisible: { type: Boolean, default: false },
  projectId: { type: String, default: "" },
  closeCallback: { type: Function, default: () => {} },
  successCallback: { type: Function, default: () => {} }
});
let clipboardDataList = ref<any>([]);

const configModel = defineModel("config", {
  type: Object,
  default: () => {}
});

const configOrigan = configModel.value?.form;

// computed
// const configOrigan = computed(() => {
//   return props.config?.form;
// });
const ruleFormRef = ref<any>(null);
const emit = defineEmits(["update:drawer-visible", "change"]);
// 方法
const handleClose = () => {
  emit("update:drawer-visible", false);
  props.closeCallback();
};
const handleSubmit = () => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return;
    try {
      const params = configModel.value.transformData
        ? configModel.value.transformData(JSON.parse(JSON.stringify(configOrigan.formData)))
        : configOrigan.formData;
      await configModel.value.api(params);
      ElMessage.success({ message: configModel.value.message });
      emit("change", true);
      props.successCallback && props.successCallback();
      handleClose();
    } catch (error) {
      console.log(error);
    }
  });
};
// 复制
const handlePaste = (e: any) => {
  console.log(e);
  // 判断是否有上传文件(目前只过滤一级)
  if (!configModel.value.column?.find((item: any) => item.type === "file")) return;
  const clipboardData = e.clipboardData;
  if (!Array.from(clipboardData.files).length) return;
  clipboardDataList.value = clipboardData.files;
};
</script>
<style lang="scss">
.project-info-dialog {
  display: flex;
  flex-flow: column nowrap;
  .el-dialog__header {
    display: block !important;
    margin-bottom: 0 !important;
  }
  .info-container {
    height: 580px;
  }
  .info-form {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
  }
  .el-select,
  .el-cascader,
  .el-input-number,
  .el-date-editor {
    width: 100%;
    .el-input__inner {
      text-align: left;
    }
  }
  .all-h {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 0 30px;
    width: 100%;
    .el-select,
    .el-cascader,
    .el-input-number,
    .el-date-editor {
      width: 100%;
    }
  }
  .fan {
    .title {
      margin-bottom: 10px;
    }
    .table {
      margin-bottom: 20px;
    }
  }
  .title {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #333333;
  }
  .form-item {
    margin: 0;
  }
  .group {
    width: 100%;
  }
  .group-title {
    font-size: 16px;
    font-weight: 600;
    color: #333333;
  }
  .group-content {
    box-sizing: border-box;
  }
  .group-wrap {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    .el-form-item {
      flex: 1;
      &[label-positions="right"] {
        display: flex;
        flex: 1;
        align-items: center;
        .el-form-item__label {
          width: 120px;
          margin-bottom: 0;
          text-align: left;
        }
      }
    }
    .title {
      flex: 0 0 24px;
    }
    .text {
      flex: 1;
    }
  }
  .common-tr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .flag {
      width: 32px;
      height: 32px;
      margin-right: 10px;
      .user-default {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        border: 1px dashed #cccccc;
        border-radius: 50%;
      }
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
  }
  .el-dialog__body {
    // padding: calc(var(--el-dialog-padding-primary) + 10px) var(--el-dialog-padding-primary) !important;
  }
}
</style>
